<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>员工管理首页</title>
  <link rel="stylesheet" th:href="@{/static/css/index_work.css}">
</head>
<body>
<div id="app">

  <table>
    <tr>
      <th colspan="4">员工信息列表</th>
      <th colspan="1">operate</th>
    </tr>

    <tr>
      <th>id</th>
      <th>lastName</th>
      <th>email</th>
      <th>gender</th>
      <th> <a th:href="@{addEmployee}">addEmployee</a></th>
      </tr>
    <tr th:each="employee:${allEmployee}">
      <td th:text="${employee.id}"></td>
      <td th:text="${employee.lastName}"></td>
      <td th:text="${employee.email}"></td>
      <td th:text="${employee.gender}"></td>
      <td>
        <a @click="deleteEmployee()" th:href="@{'/employee/'+${employee.id}}">delete</a>
        <a th:href="@{'/update/'+${employee.id}}">update</a>
      </td>
    </tr>
  </table>
  <form id="delete_form" ,method="post">
    <!--  设置删除的请求方式delete-->
    <input type="hidden" name="_method" value="delete">
  </form>
</div>
<!--引入js文件-->
<script type="text/javascript" th:src="@{/static/js/vue.js}"></script>
<script type="text/javascript">
  var vue = new Vue({
    el:"#app",
    methods:{
//event表示当前事件
      deleteEmployee:function () {
        var delete_form = document.getElementById("delete_form");
//将触发事件的超链接的href属性为表单的action属性赋值
        delete_form.action = event.target.href;
        delete_form.submit();
//阻止超链接的默认跳转行为
        event.preventDefault();
      }
    }
  });
</script>
</body>
</html>